<style></style>
<template>
  <div class="padding-small" >
    <el-row class="record" type="flex" justify="center" align="middle" style="min-height:44px">
      <el-col :span="10" @click.native="popup=true">
        <img :src="$env.imgUrl+record.path" width="100%" height="100%">
      </el-col>
      <el-col :span="6" @click.native="$emit('go-detail')">
        <div>
          <span class="color-success fa fa-check font-header" v-if="record.result"></span>
          <span class="color-danger fa fa-close font-header" v-else></span>
        </div>
        <div class="font-comment color-extra-light-black">
          {{record.source}}
        </div>
      </el-col>
      <el-col :span="6" @click.native="$emit('go-detail')">
        <div>{{timeString}}</div>
        <div class="font-small color-extra-light-black">用时</div>
      </el-col>
      <el-col :span="2" @click.native="$emit('go-detail')">
        <div :class="record.result?'color-success':'color-danger'">
          {{(record.score).toFixed(1)}}
        </div>
        <div class="font-small color-extra-light-black">
          评分
        </div>
      </el-col>
    </el-row>

    <!--题目图片放大弹窗-->
    <mt-popup v-model="popup" popup-transition="popup-fade" style="width:100%">
      <img :src="$env.imgUrl+record.path" width="100%" height="100%" @click="popup=false">
    </mt-popup>
  </div>
</template>
<script type="text/babel">

  export default {
    props: [
      'record'
    ],
    data(){
      return {
        popup: false
      }
    },
    computed: {
      timeString(){
        let min = Math.floor(this.record.doProblemTime / 60);
        let second = Math.floor(this.record.doProblemTime % 60);
        let arr = [];
        if (min !== 0) {
          arr.push(min + '\'');
        }
        arr.push(second + '\"');
        return arr.join(' ');
      }
    },
    methods: {}
  };
</script>
